<template>
  <div
    class="node-properties-config"
  >
    <div class="node-properties-config__content">
      <TemplateConfigForm
        v-if="configFormType === 'base'"
        ref="templateConfigFormRef"
        :form-data="baseConfigForm"
        :approval-type="approvalType"
      />

      <CommonConfigForm
        v-if="configFormType === 'common'"
        ref="commonConfigFormRef"
        :form-data="formData"
      />

      <ActivityConfigForm
        v-if="configFormType === 'activity'"
        ref="activityConfigFormRef"
        :form-data="formData"
      />
    </div>

    <div v-if="configFormType !== 'base'" class="node-properties-config__btn-warp">
      <el-button type="info" size="mini" @click="handleCancel">取消</el-button>
      <el-button type="primary" size="mini" @click="handleSave">保存</el-button>
    </div>
  </div>
</template>
<script>
import TemplateConfigForm from '@/views/approvalFlow/components/approvalTemplate/TemplateConfigForm.vue'
import CommonConfigForm from '@/views/approvalFlow/components/approvalTemplate/CommonConfigForm.vue'
import ActivityConfigForm from '@/views/approvalFlow/components/approvalTemplate/ActivityConfigForm.vue'
export default {
  name: '',
  components: {
    TemplateConfigForm,
    CommonConfigForm,
    ActivityConfigForm
  },
  props: {
    // base / activity / common
    configFormType: {
      type: String,
      default: 'base'
    },

    formData: {
      type: Object,
      default: () => ({})
    },

    baseConfigForm: {
      type: Object,
      default: () => ({})
    },

    approvalType: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel')
    },

    async handleSave() {
      if (this.configFormType === 'activity') {
        const res = await this.activityConfigFormValidate()
        if (res) return this.$emit('save', this.formData)
      } else if (this.configFormType === 'common') {
        const res = await this.commonConfigFormValidate()
        if (res) return this.$emit('save', this.formData)
      } else {
        this.$emit('save', this.formData)
      }
    },

    async commonConfigFormValidate() {
      const result = await this.$refs.commonConfigFormRef.validateForm()

      if (result) return result

      this.$notify.error({
        title: '错误',
        message: '请将信息补充完整！'
      })

      return false
    },

    async activityConfigFormValidate() {
      return await this.$refs.activityConfigFormRef.validate()
    },

    async templateConfigFormValidate() {
      const result = await this.$refs.templateConfigFormRef.validate()
      if (result) return true
      this.$notify.error({
        title: '错误',
        message: '请将模板信息补充完整！'
      })
      return false
    }
  }
}
</script>
<style lang="scss" scoped>
.node-properties-config {
  background-color: #fff;
  width: 20%;
  height: calc(100vh - 84px - 40px);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #F5F5F5;

  &__content {
    padding: 20px;
    flex: 1;
    overflow-y: scroll;
  }

  &__btn-warp {
    border-top: 1px solid #f5f5f5;
    width: 100%;
    padding: 20px;
    bottom: 0;
    display: flex;
    justify-content: end;
  }
}
</style>
